<template>
<view class="product-list" :style="{ marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px' }">
	<view @tap="getURL(item)" :class="['item', source.style.active]" v-for="(item, index) in product.img_list" :key="index">
		<image :src="item.url"></image>
		<view class="desc">
			<view :class="['title', {special: source.style.active === 'style-3'}]">
				<view><view>
				<text class="tag" v-if="source.style.active === 'style-3'">{{ title }}</text>
				{{ item.name }}
				</view></view>
				<view v-if="source.style.active === 'style-3'">已售{{ item.saled }}</view>
			</view>
			<view class="dsc" v-if="source.style.active === 'style-1'">{{ item.advantage }}</view>
			<view class="price">
				<block v-if="source.style.active === 'style-1'">&yen;{{ item.now_price }}</block>
			    <block v-if="source.style.active === 'style-2'">
					<view class="style2">
						<view>现价: &yen;{{ item.now_price }}</view>
						<view>已售{{ item.saled }}</view>						
					</view>
					<view class="origin">原价: &yen;{{ item.orgin_price }}</view>
				</block>
				<block v-if="source.style.active === 'style-3'">
					
				</block>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		props: {
			source: [Object]
		},
		methods: {
			getURL (item) {
				if (this.shop.type === 5) {
					uni.navigateTo({
						url: `/pages/orders/productinfo?pid=${item.pid}`
					})
				} else if (this.shop.type === 1) {
					uni.navigateTo({
						url: `/pages/orders/productinfo?supply_id=${item.supply_id}&pid=${item.pid}`
					})
				}
			}			
		},
		computed: {
			...mapGetters(['shop']),
			product () {
				let width = uni.getSystemInfoSync().screenWidth
				let data = {}
				data.margin3 = this.source.margin3 / 300 * width
				data.margin4 = this.source.margin4 / 300 * width
				data.margin5 = this.source.margin5 / 300 * width
				return Object.assign({}, this.source, data)
			},
			title () {
				if (this.source.style2) {
					return this.source.style2.property.filter(item => item.field_name === this.source.style2.active)[0].title
				}
				return ''
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.product-list {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding:0 16upx;
	box-sizing: border-box;
	.item {
		width: 50%;
		overflow:hidden;
		display: flex;
		flex-direction: column;
		flex-flow: column;
		box-sizing: border-box;		
		&:nth-of-type(2n+1) {
			padding-right: 8upx;
		}
		&:nth-of-type(2n) {
			padding-left: 8upx;
		}		
		image {
			border-top-left-radius: 10upx;
			border-top-right-radius: 10upx;
			width: 100%;
			height: 340upx;
			display: block;
			position: relative;
		}
		.desc {
			margin:0 0 16upx 0;
			padding: 10upx 15upx;
			background-color:black;
			box-sizing: border-box;
			background-color: white;
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			flex: 1;
			.title {
				font-size:@title;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.special {
					flex-direction: column;
					flex-flow: column;
					align-items: flex-start;
					& > view {
						align-items: flex-start;
						&:nth-of-type(2) {
							font-size: @minSize;
							color: @gray;
							padding-top: 10upx;
						}
					}
				}
				& > view {
					display: flex;
					align-items: center;
					.tag {
						background:@red;
						color:white;
						padding: 6upx 15upx;
						margin-right: 10upx;
						font-size:@minSize;
						min-width: 50upx;
					}
					& > view { color:#333;font-size: @medium; line-height: 1.4 }
				}
			}
			.dsc { color: @gray }
			.price { 
				color: @red;
				font-weight: 600;
			    & > .style2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: normal;
					& > view:first-of-type { background-color:@red;color:white;border-radius: 20upx; padding: 0 25upx;font-size:@minSize }
					& > view:last-of-type { color:@gray; }
				}
				& > .origin {
					color:@gray;
					font-size: @minSize;
					font-weight: normal;
					text-decoration: line-through;
				}
			 }
		}
	}
}
</style>
